<template>
  <div class='container'>
    <el-card>
      <el-row>
        <!-- 查询表单 -->
        <el-col :span="22">
          <el-form :model="requestList" :inline="true" label-width="80px" class="demo-form-inline"  >
            <el-form-item prop="keyword" label="关键字" style="width: 300px" size="small">
              <el-input v-model="requestList.keyword" placeholder="请输入关键字"></el-input>
            </el-form-item>
            <el-form-item prop="state" label="状态" style="width: 300px" size="small">
              <el-select v-model="requestList.state" placeholder="请选择状态">
                <el-option label="禁用" value="0"></el-option>
                <el-option label="启用" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="empty">清除</el-button>
              <el-button type="primary" size="small" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <!-- 新增按钮 -->
        <el-col :span="2">
          <el-button type="success" size="small" @click="addskill">
            <i class="el-icon-edit" /> 新增文章
          </el-button>
        </el-col>
      </el-row>

      <!-- 消息提示 -->
      <el-alert
        :title="`数据一共 ${this.counts} 条`"
        type="info"
        :closable='false'
        show-icon>
      </el-alert>

      <!-- 文章表格 -->
      <el-table
      style="width: 100%"
      :data="artList">
        <el-table-column
          type="index"
          label="序号"
          width="100" />
        <el-table-column
          prop="title"
          label="文章标题"
          width="350" >
          <template #default="{row}">
            {{row.title}}
          <el-link v-if="row.videoURL ? true : false" type="success" @click="playVideo(row.videoURL, row.title)" >
            <i class="el-icon-video-camera" />
          </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="visits"
          label="阅读数"
          width="150" />
        <el-table-column
          prop="username"
          label="录入人"
          width="150" />
        <el-table-column
          label="录入时间"
          width="200">
          <template #default="{ row }">
            {{row.createTime | artTime}}
          </template>
          </el-table-column>
        <el-table-column
          prop="state"
          :formatter='formatter'
          label="状态"
          width="150" />
        <el-table-column
          label="操作">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="preview(row)">预览</el-button>
            <el-button type="text" size="small" @click="getstate(row)">{{ row.state === 0 ? '启用' : '禁用' }}</el-button>
            <el-button type="text" size="small" :disabled="row.state === 1 ? true : false" @click="editArt(row)">修改</el-button>
            <el-button type="text" size="small" :disabled="row.state === 1 ? true : false" @click="delArt(row)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增文章的对话框 -->
      <articlesAdd
        ref="addArtRef"
        :dialogVisible.sync="dialogVisible"
        :nodeData="nodeData"
        @obtainartList="obtainartList"
      />

      <!-- 预览文章的对话框 -->
      <articlesPreview
        :showPreview.sync="showPreview"
        :previewList="previewList"
      />

      <!-- 分页功能 -->
      <div class="block" style="float:right">
        <el-pagination
          background
          hide-on-single-page
          style="margin-bottom: 20px"
          :total="this.counts"
          :current-page="requestList.page"
          :page-size="requestList.pagesize"
          :page-sizes='[2, 4, 6, 8, 10]'
          layout=" prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>

      <!-- 视频 -->
      <el-dialog
        :title="videoTitle"
        :visible="Videoplay"
        width="50%"
        destroy-on-close
        @close="VideoClose">
          <video-player ref="videoPlayer" class="video-player vjs-custom-skin" :playsinline="true" :options="playerOptions" />
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
// 引入video样式
// import 'video.js/dist/video-js.css'
import 'video.js/dist/video'

import articlesPreview from '../components/articles-preview.vue'
import articlesAdd from '../components/articles-add.vue'
import baseApi from '@/api/base/baseApi.js'
import { list, remove, changeState } from '@/api/hmmm/articles.js'
export default {
  name: 'Articles',
  components: {
    articlesAdd,
    articlesPreview
  },
  data () {
    return {
      videoTitle: '视频', // 视频标题
      nodeData: {}, // 点击获取的对象
      previewList: {}, // 预览文章的数据
      Videoplay: false, // 视频播放的显示与隐藏
      showPreview: false, // 预览文章的显示和隐藏
      dialogVisible: false, // 对话框的显示和隐藏
      counts: 0, // 总记录数
      artList: [], // 展示的数据
      videoURL: null, // 视频地址
      requestList: { // 获取的数据
        keyword: null,
        state: null,
        page: 1, // 页码
        pagesize: 10 // 每页显示条目个数
      },
      // 视频的设置
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: '' // url地址
          // src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm' // url地址
        }],
        hls: true,
        width: document.documentElement.clientWidth, // 播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 时间分割线
          durationDisplay: true, // 总时间
          remainingTimeDisplay: false, // 剩余播放时间
          progressControl: true, // 进度条
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },
  created () {
    return this.obtainartList()
  },
  methods: {
    // 新增文章的对话框
    addskill () {
      this.dialogVisible = true
    },
    // 获取文章表格
    async obtainartList () {
      // 发送获取请求
      const { data } = await list(this.requestList)
      // 赋值到文章表格
      this.artList = data.items
      // 获取最大页数
      this.counts = data.counts
      // 成功提示
      this.$message.success('获取文章表格成功')
    },
    // 切换条数
    handleSizeChange (newVal) {
      this.requestList.keyword = null
      this.requestList.state = null
      this.requestList.page = 1
      this.requestList.pagesize = newVal
      this.obtainartList()
    },
    // 切换分页
    handleCurrentChange (newVal) {
      this.requestList.keyword = null
      this.requestList.state = null
      this.requestList.page = newVal
      this.obtainartList()
    },
    // 获取状态
    formatter (row) {
      const obj = baseApi.status.find(item => +item.id === row.state)
      return obj ? obj.value : '未知'
    },
    // 删除表格
    async delArt (data) {
      // 弹出提示框
      const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { type: 'warning' }).catch(() => {})
      // 取消提示
      if (res !== 'confirm') return this.$message.info('已取消删除操作')
      // 判断是不是当前页面的最后一条数据
      if (this.artList.length === 1 && this.requestList.page > 1) this.requestList.page--
      // 发送删除操作
      await remove(data)
      // 成功提示
      this.$message.success('已删除该文章')
      // 重新渲染页面
      this.obtainartList()
    },
    // 修改文章
    editArt (data) {
      this.nodeData = data
      console.log(this.nodeData.articleBody)
      this.dialogVisible = true
      // 父组件直接调用子组件的方法
      this.$refs.addArtRef.echoArt(data)
      this.obtainartList()
    },
    // 更改文章状态
    async getstate (data) {
      const res = await changeState({
        id: data.id,
        state: data.state === 0 ? 1 : 0
      })
      if (res.data.success !== true) this.$message.warning('更改失败')
      this.$message.success('更改成功')
      this.obtainartList()
    },
    // 预览文章
    async preview (data) {
      console.log(data)
      this.showPreview = true
      this.previewList = data
    },
    // 请空搜索框
    empty () {
      this.requestList = {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      }
    },
    // 搜索
    async search () {
      this.requestList.page = 1
      this.obtainartList()
    },
    // 播放视频
    playVideo (URL, title) {
      this.playerOptions.sources[0].src = URL
      this.videoTitle = title
      this.Videoplay = true
    },
    // 关闭视频对话框
    VideoClose () {
      this.Videoplay = false
    }
  }
}
</script>

<style scoped lang='scss'>
  .container {
    padding: 10px;
  }
</style>
